import classNames from "classnames";
import React from "react";
import {
  ChangeEvent,
  FC,
  RefObject,
  useCallback,
  useRef,
  useState,
} from "react";
import useClickOutside from "../../hooks/useClickoutSide";
import styles from "./index.module.less";
import Son from "./components/son";
import Parent from "./components/parent";
import { Button } from "antd-mobile";

const Home: FC = () => {
  // 剩余参数
  const foo = useCallback((a: number, ...ary: any[]) => {}, []);
  // some
  const arr = [true, false].some((item, index) => !!item);
  //   every
  const every = [1, 2, 3, 0].every((item, index) => !!item);
  // 多层结构结构解析
  const obj = {
    name: "zs",
    info: {
      car: false,
    },
  };
  const {
    info: { car: abc },
  } = obj;
  // find && findIndex
  const find = [1, 2, 3, 4].find((item, index) => item === 2);
  const findIndex = [1, 2, 3, 4].findIndex((item, index) => item === 1);
  // for in  for of

  // Object.keys  Object.values  Object.entrys

  const cnames = classNames(`${styles.input}`, {
    [styles.disabled]: false,
  });
  const [state, setState] = useState<string>();
  const onChange = useCallback(
    (e) => {
      console.log(e.target.value);
      setState(e.target.value);
    },
    [state]
  );
  const ref = useRef<HTMLDivElement>(null);

  /** else if */
  const device = (value: any) => {
    if (typeof value === "undefined") {
      return false;
    } else if (typeof value === "number") {
      return true;
    }
  };

  /** hook 函数 */
  useClickOutside(ref, () => {
    console.log(123);
  });

  const inputRef = useRef<HTMLInputElement | null>(null);

  return (
    <div ref={ref}>
      <span>输入</span>
      <input
        ref={inputRef}
        value={state}
        className={cnames}
        onChange={onChange}
      />
      <Button
        onClick={() => {
          console.log(inputRef.current?.value);
        }}
      >
        获取非受控组件额值
      </Button>
      <Parent>{/* <Son /> */}</Parent>
    </div>
  );
};

export default Home;
